<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/icons-extra.css" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<link rel="stylesheet" href="../css/organize-search.css" />
		<link rel="stylesheet" href="../css/home-detail.css" />
		<style type="text/css">
			[v-cloak] {
				display: none !important;
			}
			
			input {
				-webkit-user-select: auto;
			}
			
			.mui-content-body p {
				font-size: 18px;
				line-height: 26px;
				padding-bottom: 5px;
				/*letter-spacing: 0.3px;*/
				color: #464646;
				font-family: Roboto;
			}
			
			.rsp {
				border: 1px solid #D3D3D4;
				padding: 10px;
				/*新增样式*/
				background: #f7f7f7;
				color: #4b4b4b;
				border: 0;
			}
			
			.mui-table-view:after {
				background-color: #f0f0f0;
			}
			
			.mui-comments {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="pulluprefresh" style="padding-bottom: 50px;" class="mui-scroll-wrapper">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
					<span class="mui-icon mui-icon-left-nav" style="width: 45px;"></span>
				</a>
				<h1 class="mui-title"></h1>
			</header>
			<div class="mui-content mui-scroll-wrapper" id="content" v-cloak style="padding-top: 65px; padding-bottom:45px; -webkit-overflow-scrolling: touch;/* 解决ios滑动不流畅问题 */">
				<div class="mui-scroll" style="padding:0 15px">
					<h4 style="line-height: 24px;">{{items.title}}</h4>
					<div class="article-sub" style="margin-top: 12px; font-size: 14px; color: #b8b8b8;">
						<span>{{items.organizationName}}</span> <br />
						<span>{{items.creationTime}}</span></div>
					<div class="mui-content-body" v-html="items.body"></div>
					<div class="mui-comments">
						<h5 class="mui-content-padded">评论列表</h5>
						<ul class="mui-table-view" id="commentslist">
						</ul>
					</div>
				</div>
				<!--底部菜单选项-->
				<nav class="mui-bar mui-bar-tab" style="background: #fff;">
					<div class="mui-input-row" style="height: 50px;">
						<button v-show="commondflag" class="tips tips1" transition="fade" @click="showScroll()" style="cursor: pointer;">
							<span class="mui-badge mui-badge-inverted" style="color: #222;" v-show="items.commentCount >0 ">{{items.commentCount}}</span>
						</button>
						<button v-show="likeflag" class="tips tips2" v-bind:class="{'tips3':items.isLiked }" @click="handleLiked(items.isLiked,items.id)">
							<span class="mui-badge mui-badge-inverted" style="color: #222;" v-show="items.likeCount > 0">{{items.likeCount}}</span>
						</button>
						<button v-show="btncomflag" class="tips" style="width: 50px; margin-top: 12px; cursor: pointer;" @click="btnrecommend()">
							<samp style="float:right; margin-right: 8px; pointer-events: none;" style="line-height: 30px;">发送</samp>
						</button>
						<input id="txt-msg" type="search" class="mui-input" @click="focusInput()" style="cursor:pointer; " v-model="content" placeholder="文明评论..." />
					</div>
				</nav>
			</div>
		</div>
		<!--发布评论、回复评论模板-->
		<script id="btncommenttemplt" type="text/html">
			<li class="mui-table-view-cell mui-media" data-commentid="{{data.id}}" data-commentid="{{data.id}}" data-parentContent="{{data.content}}" data-parentId="{{data.id}}" data-parentCreatorName="{{data.user.name}}">
				<div class="mui-col-sm-12" style="height: 38px;">
					<img class="mui-media-object mui-pull-left" style="border-radius: 50%; width: 30px; height: 30px;" src='../images/qq.png'>
					<h5 style="color: #6a87af; font-size: 15px; line-height: 32px;">{{data.user.name}}</h5>
					<span style="font-size: 14px; color: #B9BBBE; position: absolute; right: 0; top: 8px;">{{data.creationTime}}</span>
				</div>
				<div class="mui-col-sm-12">
					{{if data.parentId != null}}
					<p class="rsp">
						<b style="font-weight: 600;">{{data.parentCreator.name}}</b>：{{data.parentContent}}
					</p>
					{{/if}}
					<p style="margin-top: 10px; color: #4b4b4b;">{{data.content}}</p>
				</div>
				<div class="mui-col-sm-12">
					<h5>
						<label class="switchLiked" data-isLiked="{{data.isLiked ? 'true' : 'false'}}" data-commentid="{{data.id}}" style="margin-right: 4px;"><img src="../images/dz02.png" style="width: 24px; height: 24px; vertical-align: middle; cursor: pointer;" />{{data.likeCount > 0 ? data.likeCount: ''}}</label> 
						<label class="repComments" data-commentid="{{data.id}}"  data-parentContent="{{data.content}}" data-parentId="{{data.id}}"  data-parentCreatorName="{{data.user.name}}"  style="padding: 4px 8px; border-radius: 5px; line-height: 26px; background: #f4f5f6; color: #313131;">回复 </label>
						<label class="delComments" data-commentid="{{data.id}}"  style="padding: 4px 8px; border-radius: 5px; line-height: 18px;  float: right; color: #6a87af; cursor: pointer;">删除 </label>
					</h5>
				</div>
			</li>
		</script>
		<!--评论列表模板-->
		<script id="commenttemplt" type="text/html">
			{{each data as item index }}
			<li class="mui-table-view-cell mui-media" data-id="{{item.id}}" data-commentid="{{item.id}}" data-parentContent="{{item.content}}" data-parentId="{{item.id}}" data-parentCreatorName="{{item.user.name}}">
				<div class="mui-col-sm-12" style="height: 38px;">
					<img class="mui-media-object mui-pull-left" style="border-radius: 50%; width: 30px; height: 30px;" src='../images/qq.png'>
					<h5 style="color: #6a87af; font-size: 15px; line-height: 32px;">{{item.user.name}}</h5>
					<span style="font-size: 14px; color: #B9BBBE; position: absolute; right: 0; top: 8px;">{{item.creationTime | dateConversion}}</span>
				</div>
				<div class="mui-col-sm-12">
					{{if item.parentId != null}}
					<p class="rsp">
						{{if item.parentCreator != null}}
						<b style="font-weight: 600;">{{item.parentCreator.name}}</b>：{{item.parentContent}} 
						{{else}}
						<b style="font-weight: 600;">内容已删除</b> {{/if}}
					</p>
					{{/if}}
					<p style="margin-top: 10px; color: #4b4b4b;">{{item.content}}</p>
				</div>
				<div class="mui-col-sm-12">
					<h5>
						<label class="switchLiked" data-isLiked="{{item.isLiked ? 'true' : 'false'}}" data-commentid="{{item.id}}" style="margin-right: 4px; cursor: pointer;"><img src="{{item.isLiked ? '../images/dz02_h.png' : '../images/dz02.png'}}" style="width: 24px; height: 24px; vertical-align: middle; cursor: pointer;" />{{item.likeCount > 0 ? item.likeCount: ''}}</label> 
						<label class="repComments" data-commentid="{{item.id}}" data-parentContent="{{item.content}}" data-parentId="{{item.id}}"  data-parentCreatorName="{{item.user.name}}" style="padding: 4px 8px; border-radius: 5px; line-height: 26px; background: #f4f5f6; color: #313131;">回复 </label>
						{{if loginid == item.creatorUserId}}
						<label class="delComments" data-commentid="{{item.id}}" style="padding: 4px 8px; border-radius: 5px; line-height: 18px;  float: right; color: #6a87af; cursor: pointer;">删除 </label>
						{{/if}}
					</h5>
				</div>
			</li>
			{{/each}} {{if totalnums >10}}
			<li class="mui-table-view-cell">
				<a class="showmore" style="text-align: center; width: 100%; font-size: 14px;">
					查看更多信息
				</a>
			</li>
			{{/if}}
		</script>
	</body>

</html>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/mui.zoom.js"></script>
<script type="text/javascript" src="../js/mui.previewimage.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/template.js"></script>
<script type="text/javascript">
	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

	//	时间日期转换
	template.helper('dateConversion', function(time) {
		var newDate = time.split('.')[0].replace('T', ' ');
		return newDate;
	});

	var logininfo = localStorageFunc.get("applogininfo");
	var scroll;
	var articlevm;
	var detailid; // 文章id
	var columname;
	var offset = 0; //当前页码
	var limit = 10; //条数
	var totals = 0; //总条数
	var setlay = 0; // 设置滚动条位置,0:顶部; 1:评论位置
	mui.init({
		/*pullRefresh: {　　
			swipeBack: false, //关闭左滑关闭功能
			container: "#pulluprefresh", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			　　up: {　　　
				height: 50, //可选.默认50.触发上拉加载拖动距离
				style: 'circle',
				contentrefresh: "正在加载...",
				contentnomore: '暂无更多评论数据',
				//callback: pullupdata //上拉加载下一页
			}
		}*/
	});

	mui.previewImage();
	mui.plusReady(function() {

		detailid = plus.webview.currentWebview().detailid;
		columname = plus.webview.currentWebview().columname;
		$(".mui-title").text(columname);

		initDOM();

		// 初始化详情页数据
		initData(detailid);

		//	获取文章评论数据
		initCommentsData(detailid, offset, limit);

		//	失去焦点事件
		$(document).on('tap', '#content .mui-scroll', function() {
			setTimeout(function() {
				articlevm.btncomflag = false;
				articlevm.commondflag = true;
				articlevm.likeflag = true;
				$("#txt-msg").css('width', '65%');
				$("#txt-msg").attr('placeholder', '文明评论...');
				articlevm.commentid = '';
				flag = false;
				setTimeout(function() {
					articlevm.content = '';
				}, 200);
				$("input").blur();
			}, 300)
		});

	});

	function initDOM() {
		articlevm = new Vue({
			el: "#content",
			data: {
				items: [],
				content: '',
				commondflag: true,
				likeflag: true,
				btncomflag: false,
				commentid: '',
				parentId: null,
				parentCreator: null,
				parentContent: null,
				isLiked: true
			},
			methods: {
				//	点赞or取消点赞
				handleLiked: function(flag, id) {
					if(flag) { //取消点赞
						ctdj.cms.setUnLike(id, function(r) {
							if(r.success) {
								articlevm.items.isLiked = false;
								articlevm.items.likeCount -= 1;
								//mui.toast('取消点赞');
							}
						});
					} else {
						ctdj.cms.setLike(id, function(r) {
							if(r.success) {
								articlevm.items.isLiked = true;
								articlevm.items.likeCount += 1;
								//mui.toast('点赞');
							}
						})
					}
				},

				//	发布评论 or 回复评论
				btnrecommend: function() {
					if(articlevm.content != '') {
						if(articlevm.commentid == '') {
							ctdj.cms.setPost(detailid, articlevm.commentid, articlevm.content, function(r) {
								if(r.success) {
									var commenttime = (new Date()).Format("yyyy-MM-dd hh:mm:ss");
									var commentDom = template('btncommenttemplt', {
										data: {
											"content": articlevm.content,
											"creatorUserId": logininfo.id,
											"parentId": null,
											"parentCreator": null,
											"parentContent": null,
											"creationTime": commenttime,
											"likeCount": 0,
											"user": {
												"name": logininfo.name,
												"id": logininfo.id
											},
											isLiked: false,
											"id": r.result
										}
									});

									$("#commentslist").prepend(commentDom);
									articlevm.items.commentCount += 1;
									articlevm.content = '';

									var scrolltop = $(document).scrollTop() == 0 ? $(".mui-content-body").height() : 0;
									mui('#content').scroll().scrollTo(0, 0 - scrolltop);

								}
							});
						} else {
							var commenttime = (new Date()).Format("yyyy-MM-dd hh:mm:ss");
							ctdj.cms.setPost(detailid, articlevm.commentid, articlevm.content, function(r) {
								if(r.success) {
									var sendobj = {
										"content": articlevm.content,
										"creatorUserId": logininfo.id,
										"parentId": articlevm.parentId,
										"parentCreator": {
											"name": articlevm.parentCreator,
											"id": articlevm.parentId
										},
										"parentContent": articlevm.parentContent,
										"creationTime": commenttime,
										"likeCount": 0,
										"user": {
											"name": logininfo.name,
											"id": logininfo.id
										},
										isLiked: false,
										"id": r.result
									};

									var commentDom = template('btncommenttemplt', {
										data: sendobj
									});

									$("#commentslist").prepend(commentDom);
									articlevm.items.commentCount += 1;

									articlevm.parentId = null;
									articlevm.parentCreator = null;
									articlevm.parentContent = null;
									articlevm.content = '';

									/*if(isAndroid) { //安卓终端
										$('body').animate({
											scrollTop: $(".mui-content-body").height() //置底操作
										}, 10);
									} else {
										setTimeout(function() {
											mui('#content').scroll().scrollTo(0, 0 - $(".mui-content-body").height(), 50);
											setlay = 1;
										}, 500);
									}*/

									var scrolltop = $(document).scrollTop() == 0 ? $(".mui-content-body").height() : 0;
									mui('#content').scroll().scrollTo(0, 0 - scrolltop);
								}
							});
						}

						$("#txt-msg").css('width', '65%');
						$("#txt-msg").attr('placeholder', '文明评论...');
						articlevm.btncomflag = false;
						articlevm.commondflag = true;
						articlevm.likeflag = true;
					}
				},

				//	焦点触发
				focusInput: function() {
					articlevm.btncomflag = true;
					articlevm.commondflag = false;
					articlevm.likeflag = false;
					$("#txt-msg").css('width', '80%');
				},

				//	显示滚动条高度
				showScroll: function() {
					//	获取滚动条到顶部的垂直高度  $(document).scrollTop()
					var scrolltop = $(document).scrollTop() == 0 ? $(".mui-content-body").height() : 0;
					console.log(scrolltop);
					if(setlay == 0) {
						mui('#content').scroll().scrollTo(0, 0 - scrolltop);
						setlay = 1;
					} else {
						mui('#content').scroll().scrollTo(0, 0);
						setlay = 0;
					}
				}

			},

			computed: {
				newBody: function(msg) {
					return msg;
				}
			}
		})
	};

	function initData(detailid) {
		ctdj.cms.getArticle(detailid, function(r) {
			if(r.success) {
				r.result.creationTime = r.result.creationTime.split('.')[0].replace('T', ' ');
				//console.log('r.result:' + JSON.stringify(r.result));
				articlevm.items = r.result;
				if(columname == '') {
					$(".mui-title").text(r.result.title);
				}
				setTimeout(function() {
					$('.mui-comments').show();
				}, 300);
			}

			if($('#Loading').length > 0) {
				setTimeout(function() {
					document.body.removeChild(document.getElementById('Loading'));
				}, 200)
			}

		});
	}

	function initCommentsData(articleid, offset, limit) {
		ctdj.cms.getComLike(articleid, offset, limit, function(r) {
			if(r.success) {
				totals = r.result.totalCount; //总条数
				var nums = r.result.items.length > 9 ? r.result.totalCount : r.result.items.length; // 判断是否还有下一页
				//console.log(nums);
				var commentDom = template('commenttemplt', {
					data: r.result.items,
					loginid: logininfo.id,
					totalnums: nums
				});

				$("#commentslist").append(commentDom);

				mui(".mui-scroll-wrapper").scroll();
			}
		});
	};

	//	格式化时间
	Date.prototype.Format = function(fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份   
			"d+": this.getDate(), //日   
			"h+": this.getHours(), //小时   
			"m+": this.getMinutes(), //分   
			"s+": this.getSeconds(), //秒   
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度   
			"S": this.getMilliseconds() //毫秒   
		};
		if(/(y+)/.test(fmt))
			fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for(var k in o)
			if(new RegExp("(" + k + ")").test(fmt))
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	}

	//	评论点赞or取消点赞 switchLiked
	$(document).on('tap', '#content #commentslist .switchLiked', function(event) {
		$("input").blur();
		var obj = $(this);
		//<img src="../images/dz02.png" style="width: 24px; height: 24px; vertical-align: middle; cursor: pointer;" />
		var thtml;
		var commentid = this.getAttribute('data-commentid');
		var isLiked = this.getAttribute('data-isLiked') == 'true' ? true : false;
		this.setAttribute('data-isLiked', !isLiked);
		var likedNum = Number(this.innerText != '' ? this.innerText : 0);
		if(!isLiked) { //点赞
			ctdj.cms.setComlike(detailid, commentid, function(r) {
				if(r.success) {
					thtml = '<img src="../images/dz02_h.png" style="width: 24px; height: 24px; vertical-align: middle;">';
					obj.html(thtml + (likedNum + 1));
				}
			})

		} else { //取消点赞
			ctdj.cms.delComunlike(commentid, function(r) {
				if(r.success) {
					thtml = '<img src="../images/dz02.png" style="width: 24px; height: 24px; vertical-align: middle;">';
					var num = (likedNum - 1) == 0 ? '' : (likedNum - 1);
					obj.html(thtml + num);
				}
			})
		}
		event.stopPropagation();
	})

	//	回复评论
	$(document).on('tap', '#commentslist .repComments ', function(e) {
		flag = true;
		var obj = $(this);
		articlevm.commentid = this.getAttribute('data-commentid');
		articlevm.parentCreator = this.getAttribute('data-parentCreatorName');
		articlevm.parentId = this.getAttribute('data-parentId');
		articlevm.parentContent = this.getAttribute('data-parentContent');

		// focus 事件, android手机有延迟调用，ios则不存在
		if(isAndroid) {
			setTimeout(function() {
				$('input').focus();
			}, 500);
		} else {
			$('input').focus();
		}

		$("#txt-msg").attr('placeholder', '回复评论:' + articlevm.parentContent + '...')

		articlevm.btncomflag = true;
		articlevm.commondflag = false;
		articlevm.likeflag = false;
		$("#txt-msg").css('width', '80%');
		e.stopPropagation();
	})

	//	删除评论
	$(document).on('tap', '#content #commentslist .delComments', function() {
		var obj = $(this);
		var commentid = this.getAttribute('data-commentid');
		mui.confirm('确认删除此条评论?', '温馨提示', ['取消', '确认'], function(e) {
			if(e.index == 1) {
				ctdj.cms.removePost(detailid, commentid, function(r) {
					if(r.success) {
						obj.parent().parent().parent().remove();
						if(articlevm.items.commentCount > 1) {
							articlevm.items.commentCount -= 1;
						} else {
							articlevm.items.commentCount = 0;
						}
					}
				})
			}
		}, 'div')
	})

	//	查看更多
	$(document).on('tap', '#content #commentslist .showmore', function() {
		$(this).parent().remove();
		if(totals > 10) {
			if(totals >= offset) {
				var plimit = (totals % 10); //取余预算
				if(totals - offset > 10) {
					offset += 10;
				} else {
					offset += plimit;
				}
				if(totals >= offset) {
					initCommentsData(detailid, offset, limit);
				}
			}
		}
	})

	//	下拉获取更多评论数据（停用）
	function pullupdata() {
		if(totals > 10) {
			if(totals >= offset) {
				var plimit = (totals % 10); //取余预算
				if(totals - offset > 10) {
					offset += 10;
				} else {
					offset += plimit;
				}
				if(totals >= offset) {
					initCommentsData(detailid, offset, limit);
					setTimeout(function() {
						mui('#pulluprefresh').pullRefresh().endPullupToRefresh();
					}, 400);
				} else {
					setTimeout(function() {
						mui('#pulluprefresh').pullRefresh().endPullupToRefresh(true);
					}, 400);
				}
			}
		} else {
			setTimeout(function() {
				mui('#pulluprefresh').pullRefresh().endPullupToRefresh(true);
			}, 400);
		}

	}
</script>